<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="home__top">
			<view class="input__wrapper">
				<Icon class="search__svg" href="search"/>
				<input class="uni-input input__search" confirm-type="search" placeholder="键盘右下角按钮显示为搜索" />
			</view>
			<button class="mini-btn sign__in" type="default" size="mini">
					<Icon class="search__svg" href="qiandao"/>
			</button>
		</view>
		<!-- 推荐导航 -->
		<Tab :list="bookList" v-if="bookList.length>0" gap="20rpx">
			<template #tab-0="obj">
				<scroll-view refresher-enabled refresher-background="transparent" class="card__wrapper">
					<monthlyFocus :list="recommendedList"/>
					<!-- 书荒广场 -->
					<Card title="书荒广场" @utilsEvent="biggerEvent">
						<template #card__content="obj">
							<swiper class="book__swiper"  :duration="400" :next-margin="nextMargin" @change="lastFullChange">
									<swiper-item class="swiper__wrapper" v-for="item in 4">
										<view class="">
											<view class="book__list" v-for="v in 3">
												<view class="swiper__icon">#</view>
												<view class="bookOfNonsense">有没有从小就建立势力的主角</view>
											</view>
										</view>
									</swiper-item>
							</swiper>
						</template>
					</Card>
				</scroll-view>
				
			</template>
		</Tab>
		
		
		
		
	</view>
</template>

<script setup>
	import Icon from '@/common/components/Icon/index.vue';
	import Tab from '@/common/components/Tab/index.vue';
	import Card from '@/common/components/Card/index.vue';
	import monthlyFocus from '@/components/MonthlyFocus/index.vue'
	import {ref,onMounted} from 'vue';
	
	const bookList = ref([]);
	const nextMargin = ref("200rpx")
	const windowHeight = ref(0);
	
	const recommendedList = ref([])
	
	// 书荒广场更多事件
	function biggerEvent(e){
		
	}
	
	// 填充最后
	function lastFullChange(e){
		if(e.detail.current==3){
			nextMargin.value="0rpx";
		}else {
			nextMargin.value="200rpx";
		}
	}
	
		
	onMounted(()=>{
			
		bookList.value = [{
			tabName:"推荐",
			id:1,
			list:[],
		},{
			tabName:"出版",
			id:2,
			list:[],
		},{
			tabName:"听书",
			id:3,
			list:[],
		},{
			tabName:"漫画",
			id:4,
			list:[],
		}]
		
		recommendedList.value = [
			{
				tabName:"推荐榜",
				id:1,
				list:[],
			},{
			tabName:"完本榜",
			id:2,
			list:[],
		},{
			tabName:"人气榜",
			id:3,
			list:[],
		},
		{
			tabName:"推荐榜",
			id:4,
			list:[],
			},{
			tabName:"完本榜",
			id:5,
			list:[],
		},{
			tabName:"人气榜",
			id:6,
			list:[],
		},
		{
			tabName:"推荐榜",
			id:7,
			list:[],
			},{
			tabName:"完本榜",
			id:8,
			list:[],
		},{
			tabName:"人气榜",
			id:9,
			list:[],
		},
		]
		
		
	})
	
</script>

<style lang="scss">
	
	.container {
		padding: 0  30rpx 20rpx;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}
	.home__top{
		display: flex;
		align-items: center;
		padding-top: 10rpx;
		height: auto;
		gap: 10rpx;
		.input__wrapper{
			position: relative;
			flex: 1;
			padding: 10rpx 0;
			border: 1rpx solid #ccc;
			background-color: white;
			.search__svg{
				position: absolute;
				left: 10rpx;
				top: 50%;
				transform: translateY(-50%);
			}
			.input__search{
				text-indent: 2em;
			
			}
		}
			
		.sign__in{
			// width: 60rpx;//34
			background-color: #fff;
			padding: 14rpx 14rpx;
			display: flex;
			justify-items: center;
		}
	}
	

.card__wrapper{
	// padding: 20rpx 20rpx;
	display: flex;
	flex-direction: column;
	gap: 30rpx;
	// background-color: red;
	height: 100%;
}
.book__swiper{
	height: 200rpx;
}
.swiper__wrapper{
	// padding-right: 120rpx;
}
.book__list{
	display: flex;
	align-items: center;
	gap: 16rpx;
	.swiper__icon{
		color: white;
		height: 40rpx;
		width: 40rpx;
		background-color: #fa6623;
		text-align: center;
		line-height: 40rpx;
		border-radius: 50%;
	}
	.bookOfNonsense{
	
		width: 76%;
		padding: 20rpx 0;
		white-space: nowrap;
		font-weight: bold;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
		// -webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

</style>
